<template>
<div class="default-main">
    <div class="update">
        <el-card>
            <el-alert title="温馨提醒：升级前请务必做好系统及数据库的备份，避免发生意外; 升级前确保网站处于关闭状态，否则可能会导致不可预知的故障。" type="success" show-icon />
            <div class="upgrade-box">
                <div class="upgrade-icon"></div>
                <div class="upgrade-text">升级后获得更强大更完善的产品体验</div>
            </div>
            <div class="system-content-wrapper" v-loading="state.loading" element-loading-text="Loading...">
                <div class="system-content-top">
                    <div class="item">
                        <span>当前版本：</span>
                        <el-tag v-if="state.is_auth">商用版</el-tag>
                        <el-tag v-else type="warning">免费版</el-tag>
                        <el-tag type="success">v{{state.version}}</el-tag>
                    </div>
                    <div class="item">
                        <span>版本发布时间：</span>
                        <span>{{state.release}}</span>
                    </div>
                    <div class="item">
                        <span>最近一次更新时间：</span>
                        <span>{{state.update_date}}</span>
                    </div>
                </div>
                <div v-if="state.new_version" class="system-content-top">
                    <div class="tip_upgrade" >
                        <el-tag type="danger" effect="dark">发现新版本V{{state.new_version}}</el-tag>
                    </div>
                    <span style="margin-bottom: 10px">更新内容：</span>
                    <div class="upgrade-content">
                        <div v-html="editorContent(state.content)" />
                    </div>
                </div>
            </div>
            <div class="system-content-bottom">
                <el-button
                    v-if="state.new_version"
                    type="primary"
                    :loading="state.loading"
                    @click="updateNow"
                >
                    立即升级
                </el-button>
                <el-button
                    v-else
                    type="primary"
                    :loading="state.loading"
                    @click="onUpdate(2)"
                >
                    检测更新
                </el-button>
                <el-button @click="onUpdateLog">查看更新日志</el-button>
            </div>
        </el-card>
        <el-dialog
            v-model="state.update_log_show"
            title="更新日志"
            width="90%"
        >
            <div>
                <el-scrollbar height="400px">
                    <el-timeline>
                        <el-timeline-item
                            v-for="item in state.update_log"
                            :key="item.id"
                            :timestamp="timeFormat(item.create_time, 'yyyy-mm-dd')"
                            placement="top"
                        >
                            <el-card>
                                <div class="content" v-html="editorContent(item.content)" />
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-scrollbar>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="state.update_log_show = false">关闭</el-button>
                <el-button type="primary" @click="state.update_log_show = false">确定</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { index, update, update_log } from '/@/api/backend/system'
import { ElMessage, ElMessageBox } from 'element-plus'
import markdownIt from 'markdown-it'
import {isEmpty} from "lodash-es";
import {timeFormat} from "/@/utils/common";

const md = new markdownIt({
    linkify: true,
    breaks: true
});

const state = reactive({
    update_log_show: false,
    update_log: [{id: '', content: '', create_time: ''}],
    loading: false,
    version: '',
    new_version: '',
    release: '',
    update_date: '',
    content: '',
    is_auth: false,
    form: {
        version: '',
    }
})

// 加载页面完成 获取数据
onMounted(() => {
    index().then((data) => {
        if (data.code === 1) {
            state.version = data.data.version.version
            state.release = data.data.version.release
            state.new_version = data.data.query.new_version
            state.update_date = data.data.query.update_date
            if (data.data.query.status === 1) {
                state.is_auth = true
            }
            // 检测更新
            if (state.version) {
                update({
                    is_update: 2,
                }, {
                    showCodeMessage: false,
                }).then((data) => {
                    // status==1 有新版本
                    if (data.code === 1) {
                        state.new_version = data.data?.version
                        state.content = data.data?.content
                    }
                }).catch((data) => {
                    if (!isEmpty(data.data.content)) {
                        state.new_version = data.data?.version
                        state.content = data.data?.content
                    }
                })
            }
        }
    })
})

const onUpdate = (is_update: number) => {
    state.loading = true
    update({
        is_update: is_update,
    }).then((data) => {
        if (data.code === 1) {
            state.new_version = data.data?.version
            state.content = data.data?.content
            ElMessage.success(data.msg)
            if (is_update === 1) {
                setTimeout(() => {
                    window.location.reload()
                }, 1500)
            }
        } else {
            ElMessage.error(data.msg)
        }
        state.loading = false
    }).catch((data) => {
        if(data.data.status === 1) {
            ElMessageBox.confirm(
                data.msg ?? '更新失败，请联系服务商',
                '更新错误',
                {
                    confirmButtonText: '购买商用版',
                    cancelButtonText: '取消',
                    type: 'error',
                }
            ).then(() => {
                window.open('https://www.thinkct.net/product/goods/2')
            })
        }
        state.loading = false
    })
}

const updateNow = () => {
    ElMessageBox.confirm(
        '升级前请务必做好系统及数据库的备份，避免发生意外',
        '更新提示',
        {
            confirmButtonText: '确定升级',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        onUpdate(1)
    })
}
const onUpdateLog = () => {
    // update_log
    update_log().then((data) => {
        if (data.code === 1) {
            state.update_log_show = true
            state.update_log = data.data
        }
    })
}

const editorContent = (content: string) => {
    if (content.indexOf('<p>') !== -1) {
        return content
    }
    return md.render(content)
}
</script>

<style scoped lang="scss">
.update {
    :deep(.el-dialog) {
        width: 90%;
        max-width: 700px;
        .content {
            padding: 10px;
            font-size: 14px;
            line-height: 24px;
            img {
                max-width: 100%;
            }
        }
    }
    .upgrade-box {
        padding-top: 64px;
        .upgrade-icon {
            margin: 0 auto 14px;
            width: 160px;
            height: 160px;
            background: url(/@/assets/web/images/upgrade_arrow.png) no-repeat center;
        }
        .upgrade-text {
            margin-bottom: 24px;
            line-height: 32px;
            font-size: 16px;
            text-align: center;
        }
    }
    .system-content-wrapper {
        margin: 0 auto 40px;
        border: 1px solid #e0e0e0;
        padding: 22px 33px;
        width: 640px;
        background: #fafafa;
        font-size: 14px;
        .system-content-top {
            display: flex;
            flex-direction: column;
            .item {
                display: flex;
                align-items: center;
                margin-bottom: 5px;
                .el-tag {
                    margin-right: 5px;
                }
            }
            .tip_upgrade {
                margin: 10px 0 5px;
            }
            .upgrade-content {
                margin-bottom: 10px;
                line-height: 24px;
                font-size: 13px;
            }
        }
    }
    .system-content-bottom {
        display: flex;
        justify-content: center;
    }
}
@media screen and (max-width: 768px) {
    .update {
        .upgrade-box {
            padding-top: 32px;
            .upgrade-icon {
                width: 120px;
                height: 120px;
            }
        }
        .system-content-wrapper {
            width: 100%;
            font-size: 12px;
        }
    }
}
</style>
